let user = document.querySelector("#user");
let one = document.querySelector(".one");
// console.log(one);
let oneBtn = document.querySelector(".oneBtn");
let userReg = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
// 判断昵称是否合格,且实现点击删除按钮清空内容
user.addEventListener("input", function () {
  if (user.value.length > 0) {
    oneBtn.style.display = "block";
  } else {
    oneBtn.style.display = "none";
  }
});

oneBtn.addEventListener("click", function () {
  user.value = "";
  oneBtn.style.display = "none";
});
user.addEventListener("blur", function () {
  if (!userReg.test(user.value)) {
    one.style.display = "block";
  } else {
    one.style.display = "none";
  }
});

let tel = document.querySelector("#tel");
let two = document.querySelector(".two");
let twoBtn = document.querySelector(".twoBtn");
let telReg = /^1[345678][0-9]{9}$/;
// 判断密码长度是否大于0,如果是显示twoBtn按钮,否则隐藏
tel.addEventListener("keyup", function () {
  if (tel.value.length > 0) {
    twoBtn.style.display = "block";
  } else {
    twoBtn.style.display = "none";
  }
});

// 单击twoBtn按钮清空内容并隐藏自己

twoBtn.addEventListener("click", function () {
  tel.value = "";
  twoBtn.style.display = "none";
});

// 判断手机号是否合格,如果合格two就隐藏,否则显示

tel.addEventListener("blur", function () {
  if (!telReg.test(tel.value)) {
    two.style.display = "block";
  } else {
    two.style.display = "none";
  }
});

let phone = document.querySelector("#phone"); // 输入验证码框
let threeBtn = document.querySelector(".threeBtn"); // 删除按钮
let three = document.querySelector(".three"); // 提示
let phoneReg = /^[a-zA-Z][a-zA-Z0-9_]{3}$/;

// 判断手机验证码是否大于0,如果是显示threeBtn按钮,否则隐藏

phone.addEventListener("input", function () {
  if (phone.value.length > 0) {
    threeBtn.style.display = "block";
  } else {
    threeBtn.style.display = "none";
  }
});

// 单击threeBtn按钮清空内容并隐藏自己

threeBtn.addEventListener("click", function () {
  phone.value = "";
  threeBtn.style.display = "none";
});

// 判断手机验证码是否合格,如果合格three就隐藏,否则显示

phone.addEventListener("blur", function () {
  if (!phoneReg.test(phone.value)) {
    three.style.display = "block";
  } else {
    three.style.display = "none";
  }
});

let pwd = document.querySelector("#pwd"); // 获取密码框
let fourBtn = document.querySelector(".fourBtn"); // 获取删除按钮
let four = document.querySelector(".four"); // 获取提示
let pwdReg = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
// 判断密码是否大于0,如果是显示threeBtn按钮,否则隐藏
pwd.addEventListener("keyup", function () {
  if (pwd.value.length > 0) {
    fourBtn.style.display = "block";
  } else {
    fourBtn.style.display = "none";
  }
});

// 单击fourBtn按钮清空内容并隐藏自己

fourBtn.addEventListener("click", function () {
  pwd.value = "";
  fourBtn.style.display = "none";
});

// 判断密码是否合格,如果合格four就隐藏,否则显示
pwd.addEventListener("blur", function () {
  if (!pwdReg.test(pwd.value)) {
    four.style.display = "block";
  } else {
    four.style.display = "none";
  }
});

// 判断当复选框为选中是注册按钮才能点击
let check = document.querySelector(".check input");
let registerBtn = document.querySelector(".register");
console.log(registerBtn);

check.addEventListener("click", function () {
  console.log(check.checked);
  if (check.checked) {
    registerBtn.style.background = "rgb(21,189,237)";
    registerBtn.disabled = false;
    registerBtn.style.color = "#fff";
  } else {
    registerBtn.style.background = "rgb(244,244,244)";
    registerBtn.disabled = true;
    registerBtn.style.color = "#000";
  }
});

// 点击注册按钮判断各个输入框是否符合要求 只判断错误的情况
registerBtn.addEventListener("click", function () {
  if (!userReg.test(user.value)) {
    one.style.display = "block";
  } else if (!telReg.test(tel.value)) {
    two.style.display = "block";
  } else if (!phoneReg.test(phone.value)) {
    three.style.display = "block";
  } else if (!pwdReg.test(pwd.value)) {
    four.style.display = "block";
  } else {
    alert("注册成功");
    location.href = "../page/login.html";
  }
});

// 添加边框
let input = document.querySelectorAll("input");
console.log(input);
let index = 0;
input.forEach(function (v, i) {
  if (v.type != "checkbox") {
    v.addEventListener("focus", function () {
      input[index].className = "";
      // console.log(1);
      v.className = "bor";
      index = i;
    });
  }
});
